<template>
  <div class="app-container">

    <div>

      <div>
        <span style="padding-left:0; width:150px;">1、请选择日期：</span>
        <!--        <span class="demonstration">请选择日期：/span>-->
        <el-date-picker
          v-model="dateVal"
          type="month"
          style="width:350px;"
          value-format="yyyy-M"
          placeholder="默认则导出所有年月份工资信息"/>
      </div>

      <br>
      <span style="padding-left:0;width:350px;">2、 文&emsp;件&emsp;名： </span>
      <el-input
        v-model="filename"
        placeholder="请输入文件名(默认wage)"
        style="width:350px;"
        prefix-icon="el-icon-document"/>

      <span style="color: grey; ">
        .xls
      </span>
      <div style="margin-top: 20px">
        <el-button
          :loading="downloadLoading"
          style="margin:0 0 20px 20px;"
          type="success"
          plain
          icon="el-icon-document"
          @click="handleDownload">
          导出 Excel
        </el-button>
      </div>


    </div>
  </div>
</template>

<script>/* eslint-disable indent */

import { exportExcel } from '../../../../api/wage'

export default {
  filters: {},
  data() {
    return {
      filename: '',
      dateVal: '',
      downloadLoading: false
    }
  },
  created() {
  },
  methods: {
    handleDownload() {
      this.$message({
        message: '即将开始导出并下载',
        type: 'success'
      })
      if (this.filename === '') {
        this.filename = 'wage'
      }
      if (this.dateVal != null) {
        const obj = this.dateVal.split('-')
        const year = obj[0]
        const month = obj[1]
        exportExcel(this.filename, year, month)
      } else {
        exportExcel(this.filename)
      }
    }

  }
}
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .expanded_input {
    width: 555px;
  }
</style>
